<template>
  <div>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index" type="primary">
        <router-link to="#" tag="span"
                     class="sortBoxSpan"
                     v-bind:class="{sortBoxSpanSelect:index===isActive}"
                     v-on:click.native="check(index);getLid(activity.lid)">{{ activity.labelName }}</router-link>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: "Sidebar",
  data() {
    return {
      activities: [],
      isActive: 0,
    };
  },
  mounted() {
    this.getTypeMessage();
  },
  methods: {
    getTypeMessage() {
      this.activities = [];
      this.axios.post('/blog/queryAllBlogLabel', qs.stringify({
        start: -1,
      })).then((response) => {
        for (let i = 0; i < response.data.length; i++) {
          let type = {
            num: 1,
            labelName: '',
            clickRate: 0,
            createTime: '',
            lid: '',
          }
          type.num = i + 1;
          type.labelName = response.data[i].labelName;
          type.clickRate = response.data[i].clickRate;
          type.createTime = response.data[i].createTime;
          type.lid = response.data[i].lid;
          this.activities.push(type);
        }
        this.getLid(response.data[0].lid);
      })
    },
    getLid(id) {
      this.bus.$emit('sendLid',id);
    },
    check(index){
      this.isActive=index;
    }
  },
  destroyed(){
    this.bus.$off();
  },
  created() {

  }
}
</script>

<style scoped>
.sortBoxSpan:hover, .sortBoxSpanSelect {
  color: #409eff;
}

.sortBoxSpan {
  cursor: pointer;
}
</style>
